<template>
	<u-popup v-model="popShow" mode="bottom" border-radius="14" length="67%" closeable="true" @close="closePopup">
		<view class="specfic-content">
			<view class="specfic-img">
				<image src="../../static/index/list-img_03.gif" mode=""></image>
				<text class="price-tit"><text class="tit">￥</text>59.90</text>
			</view>
			<view class="color">
				<text class="specfic-title">颜色</text>
				<view class="specfic-item-text">
					<text v-for="(item,index) in specficdata.specfic" :key='index' class="specfic-item" :class="item.id === specnum ? 'active' : ''"
					 @click="specficFun(index,item.value)">
						{{item.value}}
					</text>
				</view>
			</view>
			<view class="specfic">
				<text class="specfic-title">数量</text>
				<uni-number-box class="limitw" @eventChange="numberChange" :min="1" :max="100" :value="1" :isMin="1===1">
				</uni-number-box>
			</view>
			<view class="determine">
				<view class="determine-name" @click="linkComfirmOrder">
					确定
				</view>
			</view>
		</view>
	</u-popup>

</template>

<script>
	import uniNumberBox from '@/components/cart/uni-number-box.vue'
	export default {
		name: 'specfic',
		components: {
			uniNumberBox
		},
		props: {
			specficdata: {},
			popShow:Boolean
		},
		data() {
			return {
				specnum: 0,

				specobj: {},
				show: this.popShow
			}
		},
		mounted() {
			this.$nextTick(function() {
				this.specficFun(this.specnum, this.specficdata.specfic[0].value)

				this.numberChange();
			})
		},
		methods: {
			Determine(){
				
			},
			//选择规格		
			specficFun(index, item) {
				this.specnum = index
				this.specobj.specification = item
				this.$emit("listenTochildEvent", this.specobj);
				// console.log(index,item,this.specobj)
			},

			numberChange(val) {
				this.specobj.number = val ? val.number : 1
				this.$emit("listenTochildEvent", this.specobj);
				// console.log(val,this.specobj)
			},
			closePopup(){
				this.$emit("listenClosePopup")
			},
			linkComfirmOrder(){
				this.$emit("listenConfirmGoods");
			}
		}	
	}
</script>

<style lang="scss">
	.specfic-content {
		display: flex;
		flex-direction: column;
		padding: 21rpx 24rpx;
		
		.specfic-img {
			width: 100%;
			display: flex;
			position: relative;
			
			image{
				width: 200rpx;
				height: 200rpx;
				border-radius:12rpx;
				
			}
			.price-tit{
				position: absolute;
				bottom: 2%;
				left:30%;
				font-size:48rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(240,30,50,1);
				
				.tit{
					font-size:24rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(240,30,50,1);
				}
			}
		}
		.color{
			width: 100%;
			padding:48rpx 0;
			
			.specfic-title{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(52,52,52,1);
			}
			.specfic-item-text{
				margin-top: 39rpx;
				display: flex;
				align-items: flex-end;
				flex-wrap: wrap;
				
				.specfic-item {
					text-align: center;
					width:112rpx;
					height:48rpx;
					line-height: 48rpx;
					font-size:24rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(52,52,52,1);				
					border-radius:30rpx;
					display: inline-block;
					word-break: break-all;
					background:rgba(240,240,240,1);
					margin-right: 32rpx;
				}
				
				.specfic-item.active {
					width:112rpx;
					height:48rpx;
					line-height: 48rpx;
					color:rgba(240,30,50,1);				
					background:rgba(255,250,251,1);
					border:1rpx solid rgba(247,44,76,1);
					border-radius:30rpx;
				}
			}
			
		}
		.specfic{
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			
			.specfic-title {
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(52,52,52,1);
			}
			.specfic-content .limitw {
				width: 184rpx;
			}
		}
		.determine{
			margin-top:218rpx;
			
			.determine-name{
				width: 100%;
				height:80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size:28rpx;
				background-color: #F72F50;
				border-radius: 45rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(255,255,255,1);
			}
		}
	}

	

	

	
</style>
